<!DOCTYPE html>
<html lang="zh_CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文章详情</title>
  <!-- 引入图标 -->
  <link rel="shortcut icon" href="/favicon.ico" />
  <!-- 引入layui样式 -->
  <link rel="stylesheet" href="/layui/css/layui.css">
  <!-- 引入bootstrap样式 -->
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入articleinfo样式 -->
  <link rel="stylesheet" href="/css/articleinfo.css">
  <!-- 引入前台公共样式 -->
  <link rel="stylesheet" href="/css/common.css">
  <!-- 引入视频播放器的样式 -->
  <link rel="stylesheet" href="/plugins/superVideo/css/main-css.css">
</head>
<body>
  <div class="container-fluid bg-primary header">
    <div class="row">
      <div class="col-md-4">
        <div class="logo text-center">
          <a href="{{url('/')}}">
            <img src="/logo.png" alt="">
          </a>
        </div>
      </div>
      <div class="col-md-8">
        <div class="user text-right pr-5">
          @if($user)
          <a href="/admin/user/index">
          @if(isset($user->uimg)) 
            <img src="{{url('/'.$user->uimg)}}" class="rounded-circle mr-2" alt="">
          @else 
            <i class="layui-icon-username layui-icon"></i>
          @endif
            <span>{{$user->uname}}</span>
          </a>
          @else
          <a href="{{url('/public/login')}}">登录</a> ｜ <a href="{{url('/public/register')}}">注册</a>
          @endif
        </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container bg-light mt-3">
    <div class="row">
      <div class="col-md-9">
        <div class="main">
          <h2>{{$article->title}}</h2>
          <p>作者：{{$article->user->uname}}</p>
          <div class="content">
            {!! $article->content !!}
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="user-info pt-5 overflow-hidden">
          <h4>作者信息</h4>
          @if($article->user->uimg) 
           <img src="{{url('/'.$article->user->uimg)}}" class="rounded-circle mr-3" alt="">
          @else 
            <i class="layui-icon layui-icon-username"></i>
          @endif
          <span>{{$article->user->uname}}</span>
          <p>电话：<span>{{$article->user->phone}}</span></p>
          <p>邮箱：<span>{{$article->user->email}}</span></p>
        </div>
        <div class="article-info">
          <h4>文章信息</h4>
          <p>关键词：
          @foreach(explode(',',$article->keyword) as $keyword)
          <span class="badge badge-primary">{{$keyword}}</span>
          @endforeach
          </p>
          <p>发布时间：{{$article->created_at}}</p>
          <p>更新时间：{{$article->updated_at}}</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="comment">
          <textarea name="con" id="con" cols="30" placeholder="可以评论一下作者的文章哦" rows="10"></textarea>
          @csrf
        </div>
      </div>
      <div class="col-md-2">
        <div class="publish">
          <button class="btn btn-success">评论</button>
        </div>
      </div>
    </div>
    <ul class="com mt-4">
    @foreach($article->comment as $comment)
      <li class="bg-white px-2 py-1">
        <span class="user-icon">
          <img src="{{url('/'.$comment->user->uimg)}}" class="rounded-circle pr-1" alt="">
        </span>
        <span>{{$comment->user->uname}}：</span>
        <p class="pl-4 mt-1">{{$comment->content}}</p>
      </li>
    @endforeach
    </ul>
  </div>
  <div class="container-fluid footer mt-4 pt-3 bg-secondary">
    <div class="contact float-right">
      <img src="/imgs/contact.jpg" alt="">
    </div>
    <h2 class="text-white">生活博客-记录生活趣事</h2>
    <div class="copy">
      <p>友情链接 <a href="https://mirrors.aliyun.com">阿里云</a> ｜ 
        <a href="https://lmonkey.com">学习猿地</a> ｜
        <a href="https://baidu.com">百度</a>
      </p>
      <p>备案号京62824081412398998</p>
    </div>
  </div>
  <script src="/plugins/superVideo/superVideo.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="/layui/layui.js"></script>
  <script>
    $(function() {
      for(var i = 0; i < $('video').length; i++) {
        var vsrc = $('video').eq(i).attr('src');
        $('video').eq(i).before('<div id="videoContainer'+i+'"></div>');
        $('video').eq(i).remove();
        var nextControl = new Super.NextControl()
        // 实例化一个倍速控件
        var Dbspeen = new Super.DbspeenControl()
        // 实例化一个弹幕输入框控件
        var BarrageControl = new Super.BarrageControl()
        // 实例化一个全屏按钮控件
        var fullScreenControl = new Super.FullScreenControl()
        // 实例化视频播放资源
        var source = new Super.VideoSource({
          // type: 视频类型 mp4:可播放浏览器支持的常见格式的视频文件(mp4/ogg/webm) m3u8: 可播放Hls形式推流直播视频(***.m3u8) flv: 可播放flv视频
          // src: 视频路径，可以是本地路径亦可是网络路径
          type: 'mp4',
          src: vsrc
        })
        /* 插件的常用配置参数 */
        var config = {
          // 是否自动播放（该功能受限于浏览器安全策略，可能会失效，解决思路为初始化时设置为静音，加载完毕后取消静音）
          autoplay: false,
          currentTime: 0, // 设置视频初始播放时间，单位为秒
          loop: false, // 是否循环播放
          muted: false, // 是否默认静音
          playbackRate: 1, // 视频默认播放速度
          poster: '', // 视频首帧图片路径
          volume: 0.5, // 视频默认音量 0-1
          showPictureInPicture: true, // 是否启用画中画模式按钮（>=Chrome10有效）
          source: source, // 为视频插件设置资源
          leftControls: [nextControl], // 在底部控件栏左侧插入 “下一个”按钮控件
          rightControls: [Dbspeen, fullScreenControl], // 在底部控件栏左侧插入 “倍速” 控件和 “全屏” 控件
          centerControls: [BarrageControl] // 在底部控件栏中间插入 “弹幕输入控件”
        }
        //初始化插件superVideo('videoContainer')请对应好html中的插件容器id.
        var video = new Super.Svideo('videoContainer'+i, config)
      }
    })
    $('.publish').click(function() {
      if($('#con').val() == '') {
        return ;
      }
      
      @if($user)
      var li = document.createElement('li');
      li.className = 'bg-white px-2 py-1';
      var str = ` <span class="user-icon">
          <img src="{{url('/'.$user->uimg)}}" class="rounded-circle pr-1" alt="">
        </span>
        <span>{{$user->uname}}：</span>
        <p class="pl-4 mt-1">`+$('#con').val()+`
      </li>`;
      $(li).html(str)
      $('.com').prepend(li);
      
      var data = {
        'content': $('#con').val(),
        'u_id': {{$user->id}},
        'a_id': {{$article->id}},
        '_token': $('.comment input').val(),
      };
      console.log(data);
      $.post('{{url("/comment/add")}}',data, function(msg) {
        if(msg) {
          layui.use('layer', function(){
            var layer = layui.layer;
            
            layer.msg('成功发表评论',{icon:1});
          });
        }
      });
      $('#con').val('');

      @else 
        layer.msg('您还没有登录呢，请先登录！',{icon:0});
      @endif  
    })
  </script>
</body>
</html>